<template>
  <div class="home-top">
      <div class="project">
      <el-row :gutter="10" class="items">
          <el-col :span="4">
              <el-card shadow="hover" class="new" @click.native="handleAppend()">
                  <i class="el-icon-folder-add"></i>
                  创建项目
              </el-card>
          </el-col>
          <el-col :span="4" v-for="item in projects" :key="item.projectId">
              <el-card :class="{forbid:!item.usable}" shadow="hover" @click.native="handleView(item)">
                  <div v-if="item.role=='OWNER'" class="role owner">{{item.role}}</div>
                  <div v-else-if="item.role=='PARTNER'" class="role partner">{{item.role}}</div>
                  <div v-else class="role">{{item.role}}</div>
                  <div class="pid">
                      <i v-if="!item.usable" class="el-icon-warning"></i>
                      <span>{{item.projectId}}</span>
                  </div>
                  <div class="envs">
                      <span class="tag" v-for="env in item.envs" :key="env">[{{env}}]</span>
                  </div>
              </el-card>
          </el-col>
      </el-row>
      <el-divider content-position="left">最近访问的项目</el-divider>
      <el-row :gutter="10" class="history">
          <el-col :span="4" v-for="(item, index) in historys" :key="index">
              <el-card :class="{forbid:!item.usable}" shadow="hover" @click.native="handleView(item)">
                  <div v-if="item.role=='OWNER'" class="role owner">{{item.role}}</div>
                  <div v-else-if="item.role=='PARTNER'" class="role partner">{{item.role}}</div>
                  <div v-else class="role">{{item.role}}</div>
                  <div class="pid">
                      <i v-if="!item.usable" class="el-icon-warning"></i>
                      <span>{{item.projectId}}</span>
                  </div>
                  <div class="envs">
                      <span class="tag" v-for="env in item.envs" :key="env">[{{env}}]</span>
                  </div>
              </el-card>
          </el-col>
      </el-row>
      </div>
      <div class="foot">
        <el-divider>Copyright © 2018-2021 weiecho All rights rese️rved</el-divider>
      </div>

      <!--信息维护Form-->
      <InfoEditForm :infoDialog="infoDialog" @update="handleSearch()"></InfoEditForm>

  </div>
</template>

<script>
import InfoEditForm from "./InfoEditForm";

const historyKey = "history_visit_";
export default {
	name: 'Project',
	data() {
		return {
            infoDialog: {
                info: {}
            },
            projects: [],
            historys: []
		}
	},
  	methods:{
        async handleSearch() {
            let projects = await this.$http.fetch(this.api.projects, {searchKey: ''});
            this.projects = projects;
        },
        handleAppend() {
        	this.infoDialog = {
        		title: '创建项目',
        		visible: true,
        		option: 0,
        		info: { envs: ['def'] }
        	};
        },
        handleModify(item) {
            this.infoDialog = {
            	title: '修改项目',
            	visible: true,
            	option: 1,
            	info: JSON.parse(JSON.stringify(item))
            };
        },
        handleView(item) {
            if (!item.usable) {
                if (item.role=="OWNER" || this.$store.getters.user.isAdmin) {
                    this.handleModify(item);
                    this.appendHistory(item);
                } else {
                    this.$message({ message: '项目已经停止使用！', type: 'warning' });
                }
                return;
            }
            this.$router.push({path: '/project/kv/items', query: {projectId: item.projectId}});
            this.appendHistory(item);
        },
        appendHistory(item) {
            //排除重复数据 (保留6条记录)
            for(var i = 0; i < this.historys.length; i++) {
                if(this.historys[i].projectId == item.projectId || i>=5) {
                    this.historys.splice(i, 1);
                }
            }
            this.historys.unshift(item);
            let key = historyKey + this.$store.getters.user.userId;
            localStorage.setItem(key, JSON.stringify(this.historys));
        },
        handleHistorys() {
            let key = historyKey + this.$store.getters.user.userId;
            let value = localStorage.getItem(key);
            this.historys = JSON.parse(!value? '[]': value);
        },
  	},
	mounted(){
        this.handleSearch();

        this.handleHistorys();
  	},
    components:{
    	InfoEditForm
    }
}
</script>
<style scoped>
    .home-top {
        max-height: 100%;
        overflow-y: scroll;
        padding-top: 1.8rem;
    }
    .project {
        min-height: 30rem;
    }
    .project .el-col {
        min-width: 10.6rem;
    }
    .items {
        min-height: 20rem;
    }
    .el-card {
        color: #FFFFFF;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        cursor: pointer;
        position: relative;
    }
    .el-card >>> .el-card__body {
        padding: 15px;
    }
    .items .el-card{
        color: #409EFF;
        background: #ecf5ff;
        border-color: #b3d8ff;
    }
    .items .el-card.new {
        color: #606266;
        background: #FFF;
        border-color: #DCDFE6;
    }
    .items .el-card:hover {
        color: #FFF;
        background: #66b1ff;
        border-color: #66b1ff;
    }
    .items .el-card.new >>> .el-card__body {
        padding-top: 27px;
        padding-bottom: 27px;
    }
    .history {
        min-height: 5.5rem;
    }
    .history .el-card{
        color: #67C23A;
        background: #f0f9eb;
        border-color: #c2e7b0;
    }
    .history .el-card:hover {
        color: #FFF;
        background-color: #67C23A;
        border-color: #67C23A;
    }
    .forbid {
        color: #909399 !important;
        background: #f4f4f5 !important;
        border-color: #d3d4d6 !important;
    }
    .pid {
        font-size: 18px;
        font-weight: 500;
        height: 26px;
    }
    .envs {
        height: 16px;
        padding-bottom: 4px;
    }
    .envs .tag {
        padding: 0px 2px;
        line-height: 14px;
        font-size: 12px;
        color: #6d7074;
    }
    .role {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 12px;
        padding: 0 3px;
        border-bottom-left-radius: 3px;
        color: #f0f2ff;
        background-color: #6971a9;
    }
    .role.owner {
        color: #fef0f0;
        background-color: #f56c6c;
    }
    .role.partner {
        color: #fdf6ec;
        background-color: #e6a23c;
    }
    .foot {
        padding-top: 1rem;
        padding-bottom: 8rem;
    }
    .foot div {
        color: #999;
    }
</style>
